<template>
  <div class="left-card">
    <m-card :width="439" :height="629" title="在投项目">
      <div class="ztBox">
        <div
          style="
            width: 100%;
            padding: 0 10px;
            box-sizing: border-box;
            height: 248px;
          "
        >
          <div class="barTab" style="height: 62px">
            <div class="barTab-item barTab-item1">股权类</div>
            <div class="barTab-item barTab-item2">债权类</div>
          </div>
          <div style="width: 100%; height: 186px; position: relative">
            <v-chart
              ref="vChart"
              :option="option"
              :autoresize="true"
              @rendered="handleChartRendered"
            />
            <div
              class="vchartBox"
              :style="{
                width: '100px',
                height: '82%',
                left: `calc(${index * 33.33}% + ${
                  index * 10 + (index == 0 ? 45 : 40)
                }px)`,
                top: '16%',
                position: 'absolute',
              }"
              v-for="(item, index) in pageData.totalData"
              :key="item"
            >
              <div
                @click="showTable"
                :class="
                  pageData.shareholding[index] < 0.2
                    ? 'lvtoppos lvtoppos-short'
                    : 'lvtoppos'
                "
                :style="{
                  cursor: 'pointer',
                  background: `url( ${
                    pageData.shareholding[index] < 0.2 ? lvshortBg : lvTopBg
                  })`,
                  width: '92px',
                  height: '43px',
                  top: `${(pageData.shareholding[index] - 16) / 2}%`,
                  marginTop: `${
                    (pageData.shareholding[index] * 152.52) / 2 - 28
                  }px`,
                  textAlign: 'center',
                  lineHeight: '24px',
                  textIndent: '10px',
                  color: '#ffffff',
                  fontSize: '12px',
                  postion: 'absolute',
                }"
              >
                {{ syjcl[index] }}{{ unitArr[index] }}
              </div>
              <div
                class="lanBottompos"
                @click="showTable"
                :style="{
                  cursor: 'pointer',
                  background: `url(${lanBottomBg})`,
                  width: '92px',
                  height: '43px',
                  bottom: `${(pageData.claim[index] - 16) / 2}%`,
                  marginTop: `${((pageData.claim[index] / 2) * 152.52) / 2}px`,
                  textAlign: 'center',
                  lineHeight: '24px',
                  textIndent: '10px',
                  color: '#ffffff',
                  fontSize: '12px',
                  postion: 'absolute',
                }"
              >
                {{ dbyp[index] }}{{ unitArr[index] }}
              </div>
            </div>

            <div
              class="vchartTotalBox"
              @click="showTable"
              :style="{
                cursor: 'pointer',
                padding: '4px 12px',
                height: '20px',
                textAlign: 'center',
                lineHeight: '20px',
                opacity: '0.8',
                background: '#546DB4',
                color: '#ffffff',
                left: `calc(${index * 33.33}% + ${
                  index * 5 + (index == 0 ? 5 : -10)
                }px)`,
                top: '-10%',
                position: 'absolute',
              }"
              v-for="(item, index) in pageData.totalData"
              :key="item"
            >
              {{ syjcl[index] + dbyp[index] }}{{ unitArr[index] }}
            </div>
          </div>
        </div>
        <div
          style="
            width: 100%;
            height: 394px;
            padding-top: 58px;
            box-sizing: border-box;
          "
        >
          <div class="pie-chat-wrap">
            <div class="pie-chat">
              <m-pie
                @updatePie="updatePie"
                ref="pie"
                :data="state.pieData"
                :delay="3000"
                :colors="state.pieDataColor"
                :opacity="0.6"
                class="pieCanvas"
              >
                <template v-slot:default="slotProps">
                  <div class="pieCanvas-content">
                    <div class="pieCanvas-content-value">
                      <mCountTo
                        :startVal="0"
                        :endVal="getNumber(slotProps)"
                        :decimals="2"
                        :duration="1000"
                        :autoplay="true"
                      ></mCountTo>
                      %
                    </div>
                    <div class="pieCanvas-content-name">
                      {{ slotProps.data.name }}
                    </div>
                  </div>
                </template>
              </m-pie>
            </div>

            <div @click="showTable" class="pie-legend">
              <div class="pie-legend-item">
                <div class="item_content" style="margin-right: 71px">
                  <div class="item_label">项目类型</div>
                  <div class="item_value">
                    {{ state.projectData[actkey].type }}
                  </div>
                </div>
                <div class="item_content" style="margin-right: 60px">
                  <div class="item_label">在投项目规模</div>
                  <div class="item_value">
                    {{ state.projectData[actkey].model }}
                    <span class="item_unit">{{
                      state.projectData[actkey].modelUnit
                    }}</span>
                  </div>
                </div>
                <div class="item_content">
                  <div class="item_label">在投项目累计收益</div>
                  <div class="item_value">
                    {{ state.projectData[actkey].total }}
                    <span class="item_unit">{{
                      state.projectData[actkey].totalUnit
                    }}</span>
                  </div>
                </div>
                <!-- <div class="icon" :style="{ borderColor: state.pieDataColor[index] }"></div>
                <div class="name">{{ item.name }}</div>
                <div class="value">{{ item.value }}<span class="unit">亿</span></div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </m-card>
  </div>
</template>
<script setup>
import lanBottomBg from "@/assets/images/lan_bottom.png";
import lvTopBg from "@/assets/images/lv_top.png";
import lvshortBg from "@/assets/images/lvshort_top.png";
import {
  ref,
  reactive,
  onMounted,
  nextTick,
  onBeforeUnmount,
  defineEmits,
} from "vue";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart } from "echarts/charts";
import {
  GridComponent,
  TitleComponent,
  TooltipComponent,
} from "echarts/components";
use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  TitleComponent,
  TooltipComponent,
]);

import * as echarts from "echarts";
import mCard from "@/components/mCard/index.vue";
import VChart from "vue-echarts";
import mPie from "@/components/mPie/index.vue";
import mCountTo from "@/components/mCountTo/index.js";
const pie = ref(null);
const actkey = ref(0);
let barWidth = 24;
let myData1 = ["项目数量", "项目规模", "项目累计收益"];
let syjcl = [42, 83.81, 103.83];
let dbyp = [56, 120.25, 515.54];
let unitArr = ["个", "亿元", "亿元"];
const pageData = reactive({
  shareholding: [],
  claim: [],
  totalData: [],
});
const resetData = () => {
  syjcl.forEach((item, index) => {
    pageData.shareholding[index] = item / (item + dbyp[index]);
    pageData.claim[index] = dbyp[index] / (item + dbyp[index]);
    pageData.totalData[index] = 1;
  });
  console.log(pageData);
};
resetData();
console.log(pageData.shareholding);
console.log(pageData.claim);

const emit = defineEmits(["showTable", "hideTable"]);
const showTable = (data) => {
  emit("showTable", 0); // 触发事件并传递数据
};
const hideTable = (data) => {
  emit("hideTable", data); // 触发事件并传递数据
};
const state = reactive({
  pieDataColor: ["#5377F6", "#90CAFF", "#69EDF8", "#A3A7F4", "#63DBA4"],
  pieData: [
    {
      name: "小贷",
      value: 28,
    },
    {
      name: "实业",
      value: 15,
    },
    {
      name: "基金",
      value: 534,
    },
    {
      name: "供应链",
      value: 3,
    },
    {
      name: "保理",
      value: 67,
    },
  ],
  projectData: [
    {
      type: "实业",
      model: 400,
      modelUnit: "亿元",
      total: 400,
      totalUnit: "亿元",
    },
    {
      type: "基金",
      model: 250,
      modelUnit: "亿元",
      total: 250,
      totalUnit: "亿元",
    },
    {
      type: "小贷",
      model: 150,
      modelUnit: "亿元",
      total: 150,
      totalUnit: "亿元",
    },
    {
      type: "供应链",
      model: 200,
      modelUnit: "亿元",
      total: 200,
      totalUnit: "亿元",
    },
    {
      type: "保理",
      model: 150,
      modelUnit: "亿元",
      total: 150,
      totalUnit: "亿元",
    },
  ],
});

function getNumber(slotProps) {
  return Number(
    ((slotProps.data.value / slotProps.data.count) * 100).toFixed(2)
  );
}
const updatePie = (item) => {
  // console.log("更新------")
  // console.log(item)
  state.projectData.forEach((val, index) => {
    if (val.type === item.name) {
      actkey.value = index;
    }
  });
};
const option = ref({
  backgroundColor: "rgba(0,0,0,0)",
  legend: {
    // top: 'bottom'
    right: 10,
    top: 10,
  },
  graphic: [], // 初始化为空，动态添加标注线
  tooltip: {
    show: false, // 直接关闭提示框
    trigger: "axis",
    axisPointer: {
      type: "shadow",
      textStyle: {
        color: "#fff",
      },
    },
    textStyle: {
      color: "#fff",
    },
    backgroundColor: "rgba(17,95,182,0)", //设置背景颜色
    borderColor: "rgba(255, 255, 255, 0)",
    confine: true,
    formatter: "{b}: {c}数量",
  },
  grid: {
    top: "16%",
    left: "-16%",
    right: "4%",
    bottom: "2%",
    containLabel: true,
  },

  xAxis: {
    type: "category",
    data: myData1,
    axisLabel: {
      color: "#fff",
      interval: 0,
      fontSize: "14px",
      align: "center",
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(127, 214, 255, .4)",
      },
    },
    splitLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: [
    {
      show: false, // 完全隐藏Y轴
      axisLabel: {
        textStyle: {
          fontSize: "14px",
          color: "#fff",
          lineHeight: 16,
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(28, 130, 197, .3)",
          type: "dashed",
        },
      },
    },
  ],
  series: [
    {
      //下半截柱状图
      type: "bar",

      barWidth: barWidth,
      itemStyle: {
        //lenged文本
        opacity: 1,
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          1,
          0,
          [
            {
              offset: 0,
              color: "#4289E5", // 0% 处的颜色
            },
            {
              offset: 0.26,
              color: "#377DE4", // 0% 处的颜色
            },
            {
              offset: 0.52,
              color: "#5CA1F5", // 0% 处的颜色
            },
            {
              offset: 0.76,
              color: "#86C5FD", // 100% 处的颜色
            },
            {
              offset: 1,
              color: "#2282ED", // 100% 处的颜色
            },
          ],
          //  [
          //     {
          //        offset: 0,
          //        color: '#1C7474' // 0% 处的颜色
          //     },
          //     {
          //        offset: 1,
          //        color: '#158A8A' // 100% 处的颜色
          //     }
          //  ],
          false
        ),
      },
      data: pageData.claim,
    },
    {
      // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
      type: "bar",

      barWidth: barWidth,
      itemStyle: {
        color: "transparent",
      },
      data: pageData.claim,
    },
    {
      type: "pictorialBar",
      symbolSize: [barWidth, barWidth / 2],
      symbolOffset: [0, -barWidth / 4],
      z: 12,
      symbolPosition: "end",
      itemStyle: {
        color: "#1C7474",
        opacity: 1,
      },
      data: pageData.totalData,
    },
    {
      // 中间圆片
      type: "pictorialBar",
      symbolSize: [barWidth, barWidth / 2],
      symbolOffset: [0, -barWidth / 4],
      z: 12,
      itemStyle: {
        opacity: 1,
        color: "#32C2E7",
      },
      symbolPosition: "end",
      data: pageData.claim,
    },
    {
      // 中间圆片
      type: "pictorialBar",
      symbolSize: [barWidth, barWidth / 2],
      symbolOffset: [0, -barWidth / 4],
      z: 12,
      itemStyle: {
        opacity: 1,
        color: "#32C2E7",
      },
      symbolPosition: "start",
    },
    {
      // 背景柱体
      type: "bar",

      barWidth: barWidth,
      barGap: "-100%",
      z: 1,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          1,
          0,
          [
            {
              offset: 0,
              color: "#158A8A", // 0% 处的颜色
            },
            {
              offset: 0.25,
              color: "#1C7474", // 0% 处的颜色
            },
            {
              offset: 0.5,
              color: "#36CDCD", // 0% 处的颜色
            },
            {
              offset: 0.75,
              color: "#44E6E6", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#126F6F", // 100% 处的颜色
            },
          ],
          //  [
          //     {
          //        offset: 0,
          //        color: '#4289E5' // 0% 处的颜色
          //     },
          //     {
          //        offset: 1,
          //        color: '#377DE4' // 100% 处的颜色
          //     }
          //  ],
          false
        ),
        opacity: 1,
      },
      data: pageData.totalData,
    },
  ],
});
const handleChartRendered = (chart) => {
  // console.log("渲染完成")
};
</script>
<style scoped lang="scss">
.barTab {
  display: flex;
  justify-content: flex-end;
  padding-top: 14px;
  box-sizing: border-box;
  .barTab-item {
    font-weight: 400;
    font-size: 12px;
    color: #ffffff;
    line-height: 17px;
    position: relative;
  }
  .barTab-item1 {
    margin-right: 36px;
  }
  .barTab-item1::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #338dff;
    left: -16px;
    top: 3px;
    position: absolute;
  }
  .barTab-item2::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3edbdb;
    left: -16px;
    top: 3px;
    position: absolute;
  }
}
.pie-chat-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
// 饼图
.pie-chat {
  pointer-events: all;
  position: relative;
  width: 100%;
  height: 168px;

  .pieCanvas {
    width: 100%;
    height: 100%;
    pointer-events: all;
  }
  .pieCanvas-content {
    width: 100%;
    height: 100%;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 12px;
    &-value {
      font-size: 15px;
      font-weight: bold;
      text-shadow: 0 0 10px rgb(0 0 0);
    }
    &-name {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #fff;
      font-size: 12px;
      text-align: center;
    }
  }
}
// 饼图3d legend
.pie-legend {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px 0;
  &-item {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    box-sizing: border-box;

    .icon {
      width: 10px;
      height: 10px;
      border-radius: 10px;
      border: 2px solid #17e6c3;
      box-sizing: border-box;
      margin-right: 10px;
    }
    .name {
      font-weight: 500;
      font-size: 12px;
      color: #ffffff;
    }
    .value {
      display: flex;
      flex-wrap: nowrap;
      align-items: flex-end;
      justify-content: flex-end;
      width: 80px;
      text-align: right;

      font-weight: bold;
      color: #ffffff;
      font-family: D-DIN;
      font-weight: bold;
      font-size: 16px;
      .unit {
        font-family: D-DIN;
        font-weight: 400;
        font-size: 10px;
        color: #ffffff;
        opacity: 0.5;
        padding-left: 10px;
      }
    }
  }
}
.ct_group {
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
  .ct_group_item {
    width: calc((100% - 68px) / 3);
    text-align: center;
    .ct_group_item_img {
      width: 32px;
      height: 32px;
      display: block;
      margin: 0 auto;
    }
    .ct_group_item_title {
      font-weight: 500;
      font-size: 14px;
      color: #a1c2f9;
      line-height: 20px;
      margin-top: 16px;
    }
    .ct_group_item_value {
      font-size: 16px;
      color: #fcfcfc;
      line-height: 18px;
      font-weight: 600;
      margin-bottom: 37px;
      margin-top: 10px;
      font-family: "Douyu";
      cursor: pointer;
    }
    .ct_group_item_unit {
      font-weight: 400;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.6);
      font-family: "微软雅黑";
      line-height: 20px;
    }
  }
}
.ct_group::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(180deg, #1b407d 0%, rgba(8, 58, 123, 0.68) 100%);
  opacity: 0.2;
}
.item_content {
  cursor: pointer;
  .item_label {
    font-weight: 400;
    font-size: 12px;
    color: #a1c2f9;
    line-height: 17px;
  }
  .item_value {
    font-size: 14px;
    color: #ffffff;
    line-height: 16px;
    font-weight: 600;
    margin-top: 8px;
    font-family: "Douyu";
  }
  .item_unit {
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: rgba(255, 255, 255, 0.6);
    font-family: "微软雅黑";
  }
}
.ztBox {
  position: relative;
}
.ztBox::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #1b407d 0%, rgba(8, 58, 123, 0.68) 100%);
  opacity: 0.2;
  z-index: -1;
}
.lvtoppos-short {
  width: 92px !important;
  height: 28px !important;
}
.vchartTotalBox::after {
  content: "";
  position: absolute;
  bottom: -9px; /* 调整三角形与盒子的距离 */
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px 10px 0; /* 上边宽，左右边宽，下边宽（设为0） */
  border-style: solid;
  border-color: #546db4 transparent transparent; /* 上边框颜色与盒子相同 */
}
.vchartTotalBox:nth-of-type(1) {
  margin-left: 10px;
}
.vchartTotalBox:nth-of-type(2) {
  margin-left: 10px;
}
.vchartTotalBox:nth-of-type(3) {
  margin-left: 10px;
}
</style>
